import React from "react";
import { Modal, Row, Col, Input } from "antd";
import { observer, inject } from "mobx-react";
import "./style.scss";

@inject("SubjectStore")
@observer
class SubjectManager extends React.Component {
    updateData = (e, id) => {
        console.log(e, id);
        this.props.SubjectStore.changeResultData(id, e.target.value);
    };

    editData = id => {
        this.props.SubjectStore.changeEditStatus(id);
        console.log(id);
    };

    saveData = (id, value) => {
        this.props.SubjectStore.saveData(id, value);
    };

    sureSub = () => {
        this.props.onCancel();
    };

    delete = id => {
        console.log("delete one item", id);
    };

    render() {
        const {
            SubjectStore: { resultData }
        } = this.props;
        return (
            <Modal visible title="专题管理" onOk={this.sureSub} onCancel={() => this.props.onCancel()}>
                <div className="manager-container">
                    <div className="manager-content">
                        {resultData &&
                            resultData.map(item => (
                                <Row key={`row-${item.id}`} style={{ width: "100%", height: 60, lineHeight: "60px" }}>
                                    <Col span={16}>
                                        {item.edit ? (
                                            <Input
                                                style={{ width: "80%" }}
                                                placeholder="input with clear icon"
                                                value={item.name}
                                                onChange={e => this.updateData(e, item.id)}
                                            />
                                        ) : (
                                            <span>{item.name}</span>
                                        )}
                                    </Col>
                                    <Col span={4} className="order-list-row-col" onClick={() => this.editData(item.id)}>
                                        <i className="order-edit" />
                                        {item.edit ? (
                                            <span onClick={() => this.saveData(item.id)} className="span-text">
                                                保存
                                            </span>
                                        ) : (
                                            <span onClick={() => this.editData(item.id)} className="span-text">
                                                重命名
                                            </span>
                                        )}
                                    </Col>
                                    <Col span={4} className="order-list-row-col" onClick={() => console.log(item)}>
                                        <i className="delete" />
                                        <span className="span-text" onClick={() => this.delete(item.id)}>
                                            删除
                                        </span>
                                    </Col>
                                </Row>
                            ))}
                    </div>
                    <div className="manager-footer">
                        <span>提示：</span>
                        分享专题到指定用户后，该用户专题模块可查看操作当前专题内容。
                    </div>
                </div>
            </Modal>
        );
    }
}

export default SubjectManager;
